<script>
import { mapState } from 'vuex'
import CountTo from 'vue-count-to'

export default {
  name: 'UserInfo',
  props: {
    homeData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  components: {
    CountTo
  }
}
</script>

<template>
  <el-card class="layui-anim layui-anim-scale">
    <div class="userInfo">
      <img v-lazy="userInfo.staffPhoto">
      <div class="text">
        <div class="top">江苏传智播客教育科技股份有限公司 <span class="btn">体验版</span></div>
        <div class="bottom">
          <span>{{ userInfo.username }} ｜ {{ userInfo.company }}-{{ userInfo.departmentName }}</span>
        </div>
      </div>
    </div>
    <ul class="countBox">
      <li>
        <span class="text">组织总人数</span>
        <span class="number">
          <CountTo :srat-val="0" :end-val="homeData.employeeTotal" :duration="1500"></CountTo>
        </span>
      </li>
      <li>
        <span class="text">正式员工</span>
        <span class="number">
           <CountTo :srat-val="0" :end-val="homeData.regularEmployeeTotal" :duration="1500"></CountTo>
        </span>
      </li>
      <li>
        <span class="text">合同待签署</span>
        <span class="number">
           <CountTo :srat-val="0" :end-val="homeData.contractSignTotal" :duration="1500"></CountTo>
        </span>
      </li>
      <li>
        <span class="text">等待入职</span>
        <span class="number">
           <CountTo :srat-val="0" :end-val="homeData.toBeEmployed" :duration="1500"></CountTo>
        </span>
      </li>
      <li>
        <span class="text">本月待转正</span>
        <span class="number">
           <CountTo :srat-val="0" :end-val="homeData.toBeConfirmed" :duration="1500"></CountTo>
        </span>
      </li>
      <li>
        <span class="text">本月待离职</span>
        <span class="number">
           <CountTo :srat-val="0" :end-val="homeData.toBeDismissed" :duration="1500"></CountTo>
        </span>
      </li>
      <li>
        <span class="text">接口总访问</span>
        <span class="number">
           <CountTo :srat-val="0" :end-val="homeData.interfaceAccessTotal" :duration="1500"></CountTo>
        </span>
      </li>
    </ul>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  width: 100%;
  margin: 10px 0;

  .userInfo {
    width: 1280px;
    display: flex;
    align-items: center;

    img {
      width: 60px;
    }

    .text {
      margin-left: 10px;

      .top {
        color: #383c4e;
        font-size: 16px;

        .btn {
          font-size: 12px;
          background: #f5f6f8;
          text-align: center;
          padding: 2px 8px;
          border-radius: 2px;
          color: #697086;
        }
      }

      .bottom {
        margin-top: 10px;
        color: #697086;
        font-size: 14px;
      }
    }
  }

  .countBox {
    width: 100%;
    display: flex;
    margin-top: 20px;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: .5;

      .text {
        font-size: 16px;
      }

      .number {
        font-size: 30px;
        margin-top: 10px;
      }
    }
  }
}
</style>
